import React, { Component } from "react";
import "../css/done.css";
import eventEmitter from "../events";

class Done extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [],
    };
  }
  componentDidMount() {
    eventEmitter.addListener("Done", (list) => {
      console.log(list);
      this.state.list.push(list);
      localStorage.setItem('list', this.state.list)
      this.setState({
        list: this.state.list,
      });
    });
  }
  render() {
    return (
      <div className="content_done">
        <div className="done">
          <h1>已完成</h1>
          <span>1</span>
        </div>
        <div className="content">
        <ul>
              {this.state.list.map((el, index) => {
                if(el.flag==1){
                  return (
                    <li key={index}>
                      <p>
                        <input
                          type="checkbox"
                          checked
                          onChange={() => {
                            el.flag = 0;
                            let obj=el;
                            eventEmitter.emit("Underway",obj)
                            this.state.list.splice(index,1)
                            localStorage.setItem('list', JSON.stringify(this.state.list))

                            this.setState({
                              list:this.state.list
                          })
                          }}
                        />
                        {el.value}
                      </p>
                      <button
                        onClick={() => {
                          this.state.list.splice(index, 1);
                          localStorage.setItem('list', JSON.stringify(this.state.list))
                          this.setState({
                            list: this.state.list,
                          });
                        }}
                      >
                        -
                      </button>
                    </li>
                  );
                }
              })}
            </ul>
        </div>
      </div>
    );
  }
}

export default Done;
